<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="6em"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="分类图标" prop="img">
                    <el-upload-image v-model="formData.img"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="分类名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入分类名称"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                    <el-input
                        v-model="formData.sort"
                        placeholder="请输入排序号"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        :active-value="1"
                        :inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "article-type-edit",
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    props: {
        selection: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        selection() {
            this.setFormData();
        }
    },
    mounted() {
        this.setFormData();
    },
    data() {
        return {
            current: 0,
            formData: {
                img: [],
                name: "",
                sort: "",
                status: 1
            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],
                sort: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "只能输入正整数"
                    }
                ],
                status: {
                    required: true,
                    message: "此项为必填项"
                }
            }
        };
    },
    methods: {
        setFormData() {
            if (this.selection.length > 0) {
                const data = this.selection[this.current];
                this.formData.id = data.id;
                this.formData.img = [{ url: data.img }];
                this.formData.name = data.name;
                this.formData.sort = data.sort;
                this.formData.status = data.status;
            }
        },
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    if (formData.img.length > 0) {
                        if (formData.img[0].response) {
                            formData.img =
                                "//zdcloud.zxkjnc.com" +
                                formData.img[0].response.data.file.url;
                        } else {
                            formData.img = formData.img[0].url;
                        }
                    } else {
                        formData.img = "";
                    }
                    await post({
                        url: "/admin/wiki.newsCate/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    if (this.current === this.selection.length - 1) {
                        this.$emit("update");
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.current += 1;
                        this.setFormData();
                    }
                }
            });
        },
        onCancel() {
            if (this.current > 0) {
                this.$emit("update");
            }
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>
